<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0.maximum-scale=1.0,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="shopping/css/reset.css">
    <link rel="stylesheet" href="shopping/css/index.css">
    <link rel="stylesheet" href="shopping/css/flexible.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="shopping/js/jquery-3.3.1.min.js"></script>
    <script src="shopping/js/flexible.js"></script>
    <script src="js/swiper.min.js"></script>
    <script src="js/vue/vue.js"></script>
    <script src="js/vue/axios.js"></script>
	<script src="js/vue/MD5.js"></script>
	<script src="js/vue/vant.js"></script>
</head>
<body>
<div id="app">
    <div id="bg" v-show="isHide">
        {{msgM}}
    </div>
    <div class="common clearfix height38 title_back">
        <a href="shopindex.html" class="lf color0 shopping_left postion">
            <img class="shopping_left_img" src="shopping/images/baileft.png">
            <span class="back">返回</span>
        </a>
        <a href="shopJs.html" class="rf">
            <img class="shopping_Cart" src="shopping/images/baishopping.png">
        </a>
    </div>
    <div class="shopDetails">
        <!-- 轮播开始 -->
        <div class="banner">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="item in details.Piclist">
                        <a href="javascript:void(0);">
                            <img :src="item"  style="width: 100%;max-height:3.75rem;">
                        </a>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <!-- <p><img src="images/shopingdetails.jpg"></p> -->
        <p class="shopTitle padding10">{{details.GoodsName}}</p>
        <p class="padding10"><span class="price_Icon">￥</span><span class="details_price">{{details.Price}}</span></p>
        <p class="padding10 sales"><span style="font-size: .12rem">本店销量：</span><span style="font-size: .12rem">{{details.Num}}</span></p>
    </div>
    <p class="line"></p>
    <div class="shopIntroduce" style="padding-bottom:0.6rem;">
        <p class="list_titles"><span style="font-size:0.14rem;color:#777777;">商品介绍</span></p>
        <div class="introduce_content" v-if="details.Info!=''" v-html='details.Info'></div>
        <div class="introduce_content" v-else style="text-align: center">暂无介绍</div>
    </div>
    <footer>
        <ul class="btn">
            <li class="lf">
                <a href="shopindex.html">
                    <img src="shopping/images/page1.png">
                    <p style="color: white;">首页</p>
                </a>
            </li>
            <li class="lf addShopping" @click="addShopping(details.id)">
                <img src="shopping/images/cart1.png">
                <p>加入购物车</p>
            </li>
            <li class="lf purchase" style="background: rgba(196, 151, 56);" @click="pay">
                <a href="#">
                    <img src="shopping/images/shopping1.png">
                    <p style="color: white;">立即购买</p>
                </a>
            </li>
        </ul>
    </footer>
</div>
</body>
<script>
new Vue({
    el: '#app',
    data: {
        gid:'',
        details:{},
        isHide:false,
        msgM:'添加成功'
    },
    async mounted() {
        new Swiper(".swiper-container", { //swiper再mounted中进行初始化
            //具体设置参加swiper官网api，这里是就是把自己随便设置的部分贴上来了
            pagination: {
                el: ".swiper-pagination"
            },
            loop: true,
            autoplay: {
                delay: 2000,
                stopOnLastSlide: true,
                disableOnInteraction: true
            },
            observeParents:true,   //注意这里！！
            observer:true, //也要注意这里！！
        });
    },
    created(){
        this.setCanS()
    },
    methods:{
         //设置参数
         setCanS(){
            let Request = new Object()
            Request = GetRequest()
            this.gid = Request['gid']
            this.getlists()
        },
        getlists(){
            this.vids=sessionStorage.getItem('Vid')
            //console.log(this.vids)
            const params={
                gid:this.gid
            }
            getVs()
            axios.get('/mobileapi/member/goods.php?act=goods_info',{params:params}).then(data =>{
                console.log(data.data)
                let { msg, code,user} = data.data
                    if (code !== 200) {
                        _this.$message({
                            message: msg,
                            type: 'error'
                        });
                    } else {
                        //window.vant.Toast.clear();
                        data=data.data.data
                        this.details=data
                        console.log(this.details)
                        if(this.details.Piclist!=null){
                            if(this.details.Piclist.length>0){
                                
                            }else{
                                this.details.Piclist.push(data.Picurl)
                                this.details.Piclist.push(data.Picurl)
                            }
                        }else{
                            this.details.Piclist=[]
                            this.details.Piclist.push(data.Picurl)
                            this.details.Piclist.push(data.Picurl)
                        }
                    }
                }).catch(function (error) {
                console.log(error); 
            })
        },
        addShopping(id){
            //console.log(this.vids)
            const params={
                gid:id
            }
            getVs()
            axios.get('/mobileapi/member/goods.php?act=add_goodscard',{params:params}).then(data =>{
                console.log(data.data)
                let { msg, code,user} = data.data
                    if (code !== 200) {
                        this.isHide=true
                        this.msgM="添加失败"
                        this.timers=setTimeout(this.hide, 2000)
                    } else {
                        this.isHide=true
                        this.msgM="添加成功"
                        this.timer=setTimeout(this.hide, 2000)
                    }
                }).catch(function (error) {
                console.log(error); 
            })
        },
        hide(){
            this.isHide=false
        },
        pay(){
            window.location.href='ljpay.html?gid='+this.gid+''
        }
    },
    beforeDestroy() {
        clearTimeout(this.timer)
        clearTimeout(this.timers)
    }
})
</script>
</html>